import React from 'react';
import {Tag} from 'antd-mobile';
import BScroll from 'better-scroll';
import ImageItem from './ImageItem';
import {fetch} from '@utils/Fetch';
import Masonry from '@components/masonry';
import Mask from '@components/mask';
import Preview from '@container/preview';
import Header from './Header';
import DocumentTitle from 'react-document-title';
import './material.less';

class Material extends React.PureComponent {
  constructor(props) {
    super(props);
    const query = props.location.state || {};
    this.caseId = query.caseId;
  }

  state = {
    materials: [],
    visible: false,
    regions: [],
    selected: '',
    text: '风格',
    previewVisible: false,
    preview: null
  };

  componentDidMount() {
    this.fLoad();
    this.fLoadRegion();
    const scroll = new BScroll(this.content, {
      pullDownRefresh: {
        threshold: 50,
        stop: 0
      },
      pullUpLoad: true
    });
    scroll.on('pullingDown', () => {
      this.fLoad();
    });
    scroll.on('pullingUp', () => {
    });
  }

  fLoad = () => {
    if (!this.caseId) return false;
    const {selected} = this.state;
    let url = `/api/material?caseId=${this.caseId}`;
    if (selected && selected !== 'all') {
      url = `${url}&regionId=${selected}`;
    }
    fetch(url).get()
      .success((res) => this.setState({materials: res.content || []}));
  };
  fLoadRegion = () => {
    if (!this.caseId) return false;
    fetch(`/api/region?caseId=${this.caseId}`).get()
      .success(res => this.setState({regions: res.content || []}));
  };
  fShowRegion = () => {
    this.setState({visible: true});
  };
  fSelectRegion = (selected, text) => {
    const {selected: b} = this.state;
    if (b !== selected) {
      this.setState({selected, text, visible: false}, this.fLoad);
    }
  };
  fPreview = (preview) => {
    this.setState({preview, previewVisible: true});
  };
  fClose = () => {
    this.setState({preview: null, previewVisible: false});
  };

  render() {
    const {materials, visible, regions, selected, text, previewVisible, preview} = this.state;
    const masonryOptions = {
      transitionDuration: 0
    };
    return (
      <DocumentTitle title='素材'>
        <div className='case-material'>
          <Header showRegion={this.fShowRegion} text={text} caseId={this.caseId} />
          <div className='case-material-content' ref={r => this.content = r}>
            <Masonry
              className='cm-group'
              options={masonryOptions}
              disableImagesLoaded={false}
              updateOnEachImageLoad={false}
            >
              {materials.map(m => (
                <ImageItem
                  key={m._id}
                  src={m.url}
                  onClick={this.fPreview.bind(this, m)}
                />
              ))}
            </Masonry>
          </div>
          <Mask visible={visible} onClose={() => this.setState({visible: false})} style={{top: 45}}>
            <div className='region-select'>
              <Tag
                key='all'
                selected={selected === 'all'}
                onChange={this.fSelectRegion.bind(this, 'all', '风格')}
              >全部</Tag>
              {regions.map(r => (
                <Tag key={r._id}
                     selected={selected === r._id}
                     onChange={this.fSelectRegion.bind(this, r._id, r.text)}
                >{r.text}</Tag>
              ))}
            </div>
          </Mask>
          {preview && previewVisible ? (
            <Preview visible={previewVisible}
                     onClose={this.fClose}
                     url={preview.url}
                     regionText={preview.regionText}
                     _id={preview._id}
            />
          ) : null}
        </div>
      </DocumentTitle>
    )
  }
}

export default Material;

